
/*
基础 Token：
基础色彩包含 primary、on_primary、brand、container、background 等色彩，
基础色会通过一定的计算方式延伸成一定数量的对比度色彩，
用于展示在用户界面的不同元素中，通过对比度关系构建界面效果。
基础色可以被直接引用，或是被引用后重新定义语义，
用于界面中同类型和显示层级的元素中。

语义 Token：
语义色彩有用于固定场景 Token 名称，这些名称定义了自身的使用场景且不可随意更改。
语义 Token 分为文本类、图标类、组件类和交互事件类。
这些类别定义了系统中大部分的使用场景，
每个 Token 参数都与基础 Token 具备一定的引用关系，
应用自定义的参数也可基于使用场景自定义引用链路。

控件 Token：
用于指定控件内某一元素所对应的参数信息，具有唯一性且不可复用。
控件 Token 属于组件内部的元素名称，
应用自定义控件可以参考这类 Token 的使用关系。
*/

/*
Primary
用于最上层文本、图标的填充和显示，低对比度可用于其他层级显示，
例如二级文本色、三级文本色等。

onPrimary
用于显示在强调色、图片之上显示的文本、图标，不可在常规界面中使用。
例如，不可在一级背景色 backgroundColorPrimary 基础上直接使用 onPrimary 颜色。

Brand
系统主题色、高亮色，用于突出核心组件信息。
应用可定制主题色，主题色影响系统默认组件，同时可用于应用自定义组件。
所有引用 brand 色彩的组件都会受到此影响。

Container
系统组件容器色，用于展示组件背景填充色。
例如普通按钮背景色、搜索框组件背景色等。
*/


/* LESS变量 - 用于计算和提高可维护性 */
@color_brand: #0A59F7; // 品牌色（基础值）

:root {
  /* 颜色 */
  /* Brand - 使用LESS变量计算透明度变体，提高可维护性 */
  --color-brand: @color_brand; // 品牌色（可通过CSS变量动态修改）
  --color-brand100: fade(@color_brand, 100%);
  --color-brand90: fade(@color_brand, 90%);
  --color-brand80: fade(@color_brand, 80%);
  --color-brand70: fade(@color_brand, 70%);
  --color-brand60: fade(@color_brand, 60%);
  --color-brand50: fade(@color_brand, 50%);
  --color-brand40: fade(@color_brand, 40%);
  --color-brand30: fade(@color_brand, 30%);
  --color-brand20: fade(@color_brand, 20%);
  --color-brand15: fade(@color_brand, 15%);
  --color-brand10: fade(@color_brand, 10%);
  --color-brand5: fade(@color_brand, 5%);
  --color-brand-press: var(--color-brand60);
  --color-brand-hover: var(--color-brand50);
  --color-brand-enable: var(--color-brand40);
  --color-brand-disable: var(--color-brand15);

  /* other colors */
  --color-waring: #e84026ff; // 一级警示色
  --color-alert: #ed6f21ff; // 二级警示色
  --color-confirm: #64bb5cff; // 确认色

  /* background */
  --color-background-emphasize: var(--color-brand);
  --color-background-primary: #ffffffff;
  --color-background-secondary: #f1f3f5ff;
  --color-background-tertiary: #e5e5eaff;
  --color-background-fourth: #d1d1d6ff;

  /* font */
  --color-font-emphasize: var(--color-brand);
  --color-font-primary: #000000e5;
  --color-font-secondary: #00000099;
  --color-font-tertiary: #00000066;
  --color-font-fourth: #00000033;
  --color-font-on-primary: #ffffffff;
  --color-font-on-secondary: #ffffff99;
  --color-font-on-tertiary: #ffffff66;
  --color-font-on-fourth: #ffffff33;
  --color-font-on_primary: var(--color-font-on-primary);
  --color-font-on_secondary: var(--color-font-on-secondary);
  --color-font-on_tertiary: var(--color-font-on-tertiary);
  --color-font-on_fourth: var(--color-font-on-fourth);

  /* icon */
  --color-icon-emphasize: var(--color-brand);
  --color-icon-emphasize-sub: fade(@color_brand, 40%);
  --color-icon-sub-emphasize: var(--color-icon-emphasize-sub);
  --color-icon-primary: var(--color-font-primary);
  --color-icon-secondary: var(--color-font-secondary);
  --color-icon-tertiary: var(--color-font-tertiary);
  --color-icon-fourth: var(--color-font-fourth);
  --color-icon-on-primary: var(--color-font-on-primary);
  --color-icon-on-secondary: var(--color-font-on-secondary);
  --color-icon-on-tertiary: var(--color-font-on-tertiary);
  --color-icon-on-fourth: var(--color-font-on-fourth);
  --color-icon-on_primary: var(--color-icon-on-primary);
  --color-icon-on_secondary: var(--color-icon-on-secondary);
  --color-icon-on_tertiary: var(--color-icon-on-tertiary);
  --color-icon-on_fourth: var(--color-icon-on-fourth);

  /* component */
  --color-comp-divider: var(--color-font-fourth); // 分割线颜色
  --color-comp-common-contrary: #ffffffff; // 通用反色
  --color-comp-emphasize-secondary: fade(@color_brand, 20%); // 20%高亮背景
  --color-comp-emphasize-tertiary: fade(@color_brand, 10%); // 10%高亮背景
  --color-comp-foreground-primary: #000000ff;
  --color-comp-background-emphasize: var(--color-background-emphasize); // 高亮背景
  --color-comp-background-neutral: #000000ff; // 黑色中性高亮背景
  --color-comp-background-primary: #ffffffff;
  --color-comp-background-primary-contrary: var(--color-background-primary);
  --color-comp-background-gray: #f1f3f5ff;
  --color-comp-background-secondary: #00000019;
  --color-comp-background-tertiary: #0000000c;
  --color-comp-background-focus: #f1f3f5ff;
  --color-comp-focused-primary: #000000e5;
  --color-comp-focused-secondary: #00000099;
  --color-comp-focused-tertiary: #00000066;

  /* interactive */
  --color-interactive-hover: var(--color-comp-background-tertiary); // 通用悬停交互式颜色
  --color-interactive-pressed: var(--color-comp-background-secondary); // 通用按压交互式颜色
  --color-interactive-focus: var(--color-brand); // 通用获焦交互式颜色
  --color-interactive-active: var(--color-brand); // 通用激活交互式颜色
  --color-interactive-select: var(--color-font-fourth); // 通用选择交互式颜色
  --color-interactive-click: var(--color-interactive-pressed); // 通用点击交互式颜色
}

/* 深色模式下的样式 */
/* LESS变量 - 深色模式品牌色 */
@color_brand_dark: #317af7ff;

@media (prefers-color-scheme: dark) {
  :root {
    /* 颜色 */
    /* Brand - 使用LESS变量计算透明度变体 */
    --color-brand: @color_brand_dark;
    --color-brand100: fade(@color_brand_dark, 100%);
    --color-brand90: fade(@color_brand_dark, 90%);
    --color-brand80: fade(@color_brand_dark, 80%);
    --color-brand70: fade(@color_brand_dark, 70%);
    --color-brand60: fade(@color_brand_dark, 60%);
    --color-brand50: fade(@color_brand_dark, 50%);
    --color-brand40: fade(@color_brand_dark, 40%);
    --color-brand30: fade(@color_brand_dark, 30%);
    --color-brand20: fade(@color_brand_dark, 20%);
    --color-brand15: fade(@color_brand_dark, 15%);
    --color-brand10: fade(@color_brand_dark, 10%);
    --color-brand5: fade(@color_brand_dark, 5%);

    /* other colors */
    --color-waring: #d94838ff; // 一级警示色
    --color-alert: #db6b42ff; // 二级警示色
    --color-confirm: #5ba854ff; // 确认色

    /* background */
    --color-background-primary: #e5e5e5ff;
    --color-background-secondary: #191a1cff;
    --color-background-tertiary: #202224ff;
    --color-background-fourth: #2e3033ff;

    /* font */
    --color-font-primary: #ffffffe5;
    --color-font-secondary: #ffffff99;
    --color-font-tertiary: #ffffff66;
    --color-font-fourth: #ffffff33;
    --color-font-on-primary: #000000ff;
    --color-font-on-secondary: #00000099;
    --color-font-on-tertiary: #00000066;
    --color-font-on-fourth: #00000033;

    /* icon */
    --color-icon-emphasize-sub: fade(@color_brand_dark, 40%);

    /* component */
    --color-comp-common-contrary: #000000ff; // 通用反色
    --color-comp-emphasize-secondary: fade(@color_brand_dark, 20%); // 20%高亮背景
    --color-comp-emphasize-tertiary: fade(@color_brand_dark, 10%); // 10%高亮背景
    --color-comp-foreground-primary: #e5e5e5ff;
    --color-comp-background-primary: #ffffffff;
    --color-comp-background-neutral: #ffffffff; // 黑色中性高亮背景
    --color-comp-background-gray: #e5e5eaff;
    --color-comp-background-secondary: #ffffff19;
    --color-comp-background-tertiary: #ffffff0c;
    --color-comp-background-focus: #000000ff;
    --color-comp-focused-primary: #ffffffe5;
    --color-comp-focused-secondary: #ffffff99;
    --color-comp-focused-tertiary: #ffffff66;
  }
}


